﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" class="loginHtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; Charset=utf-8" />
		<meta http-equiv="Content-Language" content="zh-CN" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<title>WhiteCat</title>
		<link rel="shortcut icon" th:href="@{images/logo.png}" type="image/x-icon" />
		<!--Layui-->
		<link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
		<!--font-awesome-->
		<link th:href="@{font-awesome/css/font-awesome.min.css}" rel="stylesheet" />
		<!--全局样式表-->
		<link th:href="@{/css/global.css}" rel="stylesheet" />
		<link th:href="@{/css/animate.min.css}" rel="stylesheet" />
		<!-- 本页样式表 -->
		<link th:href="@{/css/article.css}" rel="stylesheet" />
		<link th:href="@{/css/blog.css}" rel="stylesheet" />
		<!--背景图片-->
		<link th:href="@{/css/me.css}" rel="stylesheet" />
	</head>

	<body>

	<div th:insert="~{commons/commons.html :: top}"></div>

		<div class="blog-body">

			<div class="blog-container">
				<blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow" style="visibility: visible;">
					<a href="userIndex.html" title="网站首页">网站首页<span class="layui-box">&gt;</span></a>
					<a><cite>文章专栏</cite></a>
				</blockquote>
				<div class="blog-main">

					<div id="parentArticleList" class="blog-main-left animated slideInLeft">
						<div class="flow-default" id="articleList">
							<div class="article shadow animated zoomIn" th:each="topic:${topicList}">
								<div class="article-left">
									<img th:src="@{/images/topicPicture/} + ${topic.topicPicture}" th:alt="${topic.title}">
								</div>
								<div class="article-right">
									<div class="article-title">
										<span class="article_is_top" th:if="${topic.topicType == 0}">原创</span>&nbsp;
										<span class="article_is_yc" th:if="${topic.topicType == 1}">搬运</span>&nbsp;
										<a th:href="@{/detail/} + ${topic.id}" th:text="${topic.title}"></a>
									</div>
									<div class="article-abstract">
										<a th:href="@{/detail/} + ${topic.id}" th:text="${topic.content.substring(0, 30)}"></a>
									</div>
								</div>
								<div class="clear"></div>
								<div class="article-footer">
									<span><i class="fa fa-clock-o" th:text="${#dates.format(topic.topicTime, 'yy-MM-dd hh-mm')}"></i>&nbsp;&nbsp;</span>
									<a th:href="@{/toOtherPersonal/} + ${topic.user.id}" class="article-author" th:text="${topic.getUser().getUsername()}"><i class="fa fa-user"></i>&nbsp;&nbsp;</a>
									<button th:onclick="support([[${topic.id}]])" class="article-viewinfo" style="border-style:none; background-color: white" th:if="${appraiseTopicMap[topic.id] == 1}">
										<i class="fa fa-thumbs-o-up"  style="color: deeppink" th:text=" ${topic.getSupportCount()}"></i>&nbsp;&nbsp;
									</button>
									<button th:onclick="support([[${topic.id}]])" class="article-viewinfo" style="border-style:none; background-color: white" th:if="${appraiseTopicMap[topic.id] == null || appraiseTopicMap[topic.id] == 0}">
										<i class="fa fa-thumbs-o-up"   style="color: cornflowerblue" th:text=" ${topic.getSupportCount()}"></i>&nbsp;&nbsp;
									</button>
									<span><i class="fa fa-tag"></i>&nbsp;&nbsp;<a th:href="@{/category/} + ${topic.topicTagId}" th:text="${topic.tagName}"></a></span>
									<span class="article-viewinfo"><i class="fa fa-eye" th:text="${topic.getBrowseCount()}"></i>&nbsp;</span>
									<span class="article-viewinfo"><i class="fa fa-commenting" th:text="${topic.commentCount}"></i>&nbsp;</span>
									<!--再搞个点赞的-->
								</div>
							</div>
							<!--分页-->
							<div class="layui-flow-more " style="background: white">
								<div class="page">
									<div>
										<a class="prev" th:href="@{/article/lastPage}">上一页</a>
										<a class="num" th:href="@{/article/toWhichPage/} + ${cutPage.lastPage}" th:text="${cutPage.lastPage}" th:if="${cutPage.lastPage!=0}"></a>
										<span class="current" style="color: mediumseagreen" th:text="${cutPage.nowPage}"></span>
										<a class="num" th:href="@{/article/toWhichPage/} + ${cutPage.nextPage}" th:text="${cutPage.nextPage}" th:if="${cutPage.nowPage != cutPage.getPageCount()}"></a>
										<a class="next" th:href="@{/article/nextPage}">下一页</a>
										<a class="num" href="" th:text="共 + ${cutPage.pageCount} + 页"></a>
										<div class="layui-inline layui-show-xs-block">
											<input type="text" id="pageCount" onkeyup="value=value.replace(/[^\d]/g,'')" onblur="value=value.replace(/[^\d]/g,'')" placeholder="页数" autocomplete="off" class="layui-input" style="width: 50px">
										</div>
										<div class="layui-inline layui-show-xs-block">
											<button class="layui-btn" onclick="toWhichPage()"><i class="layui-icon">&#xe615;</i></button>
										</div>
										<a class="num" th:text="共 + ${cutPage.totalCount} + 条"></a>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="blog-main-right">

						<div class="blog-search animated fadeInRight">
							<div class="layui-form-item">
								<div class="search-keywords  shadow">
									<input type="text" id="tagMessage" name="keywords" lay-filter="searchInput" lay-verify="required" placeholder="输入关键词搜索" autocomplete="off" class="layui-input">
								</div>
								<div class="search-submit  shadow">
									<button class="search-btn" onclick="searchTag()"><i class="fa fa-search"></i></button>
								</div>
							</div>
						</div>

						<div class="article-category shadow categoryOut">
							<div class="article-category-title">分类导航</div>
								<a th:href="@{/category/} + ${tag.id}" th:text="${tag.name}" th:each="tag:${tagList}"></a>
							<div class="clear"></div>
						</div>


						<div class="category-toggle"><i class="fa fa-chevron-left"></i></div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>

		<!--页脚-->
		<div th:insert="~{commons/commons.html :: down}"></div>


		<div class="blog-mask animated layui-hide"></div>

		<script th:src="@{/js/jquery.min.js}"></script>

		<script th:src="@{/layui/layui.js}"></script>

		<script th:src="@{/js/global.js}"></script>
		<script th:src="@{/js/article.js}"></script>
	<script th:inline="javascript">
		function support(topicId){
			$.get({
				url: "/chen/topic/supportOrCriticism/" + topicId,
				success: function (data){
					if (data === "error"){
						layer.msg("请先登录！")
					} else {
						location.href = "/chen/article/toWhichPage/" + [[${cutPage.nowPage}]];
					}
				},
				error: function (){
					alert("失败")
				}
			})
		}

		function toWhichPage() {
			let pageCount = $("#pageCount").val();
			if (pageCount === ""){
				layer.msg("不能为空!")
			}else if(pageCount > [[${cutPage.pageCount}]] || pageCount <= 0){
				layer.msg("无此页！")
			}
			else {
				window.location.href="/chen/article/toWhichPage/" + $("#pageCount").val()
			}
		}

		function searchTag(){
			$.get({
				url: "/chen/searchTag",
				data:{
					"tagMessage":$("#tagMessage").val()
				},
				success: function (data){
					if (data === 'none'){
						layer.msg("暂时还没有该类文章哦！");
					}
					if (data === 'success'){
						location.href="article.html";
					}
				},
				error: function (){
					layer.msg("失败")
				}
			})
		}

	</script>
	</body>

</html>